<template>
  <div class="flex-1 h-full card_class">
    <div class="card_title">
      <span>{{ title }}</span>
      <div v-if="!isDarkMode(routeName)">
        <el-select
          v-model="searchParam.year"
          placeholder="请选择"
          filterable
          :suffixIcon="() => '年'"
          class="w-[70px] mr-[10px]"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('YearList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="searchParam.month"
          placeholder="请选择"
          filterable
          clearable
          :suffixIcon="() => '月'"
          class="w-[50px]"
          :class="!panelSetIcon ? 'mr-[20px]' : ''"
          size="small"
          @change="handleSearch"
        >
          <el-option
            v-for="item in useDictionary('MonthList')"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="echarts" style="height: calc(100% - 50px)">
      <ECharts
        v-if="option"
        :option="option"
        :id="`QmsDayReject` + props.id"
        ref="chart"
        :showAllLabel="true"
      />
    </div>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0"
      @click="deletePanelItem"
    />
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import { qmsDayRejectList } from "@/assets/js/qms.ts";
import * as echarts from "echarts";
import { useRoute } from "vue-router";
import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, url, title } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const reportData = ref();

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
  // year: "2025",
  // month: "2",
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

async function handleSearch() {
  reportData.value = null;
  reportData.value = null;
  loading.value = true;
  Object.assign(searchedParam, searchParam);
  //   const { data } = await request({
  //     url: `/eam/equStatistics/queryEamRepairOrderList`,
  //     method: "post",
  //     data: {
  //       statisticsYear: searchParam.year,
  //       statisticsMoon: searchParam.month,
  //     },
  //   }).finally(() => {
  //     loading.value = false;
  //   });
  //   reportData.value = data;

  reportData.value = qmsDayRejectList;
  setOptions();
  //   nextTick(() => {
  //     setAnimation();
  //   });
}

function getFontSize() {
  if (isDarkMode(routeName)) {
    const baseSize = 13; // 基础字体大小
    const scaleFactor = window.innerWidth / 1678; // 假设设计稿宽度为1678px
    return Math.max(baseSize * scaleFactor, 13); // 设置最小字体大小
  } else {
    return 12;
  }
}

const option = ref();
const chart = ref();
function setOptions() {
  option.value = {
    renderer: "canvas", // 使用 canvas 渲染器，默认就是 canvas
    devicePixelRatio: window.devicePixelRatio || 2, // 强制更高的 devicePixelRatio
    backgroundColor: "transparent",
    tooltip: {
      trigger: "axis",
      backgroundColor: isDarkMode(routeName) ? "rgba(0,0,0,.5)" : "#FFF",
      borderColor: "transparent",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: isDarkMode(routeName) ? "rgba(0,0,0,.5)" : "#FFF",
          fontFamily: "DINLight",
          color: isDarkMode(routeName) ? "#FFF" : "#666",
        },
      },
      textStyle: {
        color: isDarkMode(routeName) ? "#FFF" : "#666",
        fontFamily: "DINLight",
        fontSize: 14,
      },
      formatter: (params: any) => {
        var relVal = params[0].name;
        for (var i = 0, l = params.length; i < l; i++) {
          relVal +=
            "<br/>" +
            params[i].marker +
            " " +
            params[i].seriesName +
            "  " +
            (params[i]?.value +
              (params[i].seriesName.includes("率") ? "%" : "") || "-");
        }
        return relVal;
      },
    },
    grid: {
      left: "3%", //图表距边框的距离
      right: "3%",
      top: "15%",
      bottom: "17%",
      containLabel: true,
    },
    legend: {
      data: ["废品率", "一次不良率"],
      left: "center",
      bottom: "2%",
      textStyle: {
        fontSize: getFontSize(),
        color: isDarkMode(routeName) ? "#eeeeee" : "#666",
      },
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
    },
    xAxis: [
      {
        name: "",
        data: reportData.value?.xdata || [],
        axisLine: {
          onZero: true,
          rotate: 30, //坐标轴内容过长旋转
          interval: 1,
          lineStyle: {
            color: "#cdd5e2",
          },
        },
        axisLabel: {
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: 12,
          // 使用 formatter 函数添加后缀
          formatter: function (value) {
            return value; // 这里的 '单位' 是你想要添加的后缀
          },
          rotate: 45,
        },
        axisTick: {
          show: true,
        },
      },
    ],
    yAxis: [
      {
        name: "",
        splitLine: {
          show: true,
          lineStyle: {
            color: isDarkMode(routeName)
              ? "rgba(255,255,255,.1)"
              : "rgba(0,0,0,.1)",
            type: "dashed",
          },
        },
        axisLabel: {
          show: true,
          formatter: "{value}%", //右侧Y轴文字显示
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: 12,
        },
      },
    ],
    series: [
      {
        name: "废品率",
        type: "line",
        smooth: true,
        data: reportData.value?.ydata || [],
        itemStyle: {
          color: "rgb(0,222,115)",
        },
        symbolSize: 7,
        label: {
          show: false,
        },
        areaStyle: {
          //区域填充样式
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,222,115,.3)",
              },
              {
                offset: 1,
                color: "rgba(0,222,115, 0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0,222,115, 0.5)", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        markPoint: {
          data: [
            {
              type: "max",
              name: "最大值",
            },
            {
              type: "min",
              name: "最小值",
            },
          ],
        },
      },
      {
        name: "一次不良率",
        type: "line",
        smooth: true,
        data: reportData.value?.ydata1 || [],
        itemStyle: {
          color: "rgb(36,120,242)",
        },
        symbolSize: 7,
        label: {
          show: false,
        },
        areaStyle: {
          //区域填充样式
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(36,120,242,.3)",
              },
              {
                offset: 1,
                color: "rgba(36,120,242, 0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(36,120,242, 0.5)", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        markPoint: {
          data: [
            {
              type: "max",
              name: "最大值",
            },
            {
              type: "min",
              name: "最小值",
            },
          ],
        },
      },
    ],
  };
}

const loading = ref(false);
onMounted(() => {
  handleSearch();
});
</script>

<style lang="scss" scoped>
.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
